//右侧导航栏
$('.sn i').on({
    mouseover(){
      $(this).nextAll().addClass('active').fadeIn(100)
    },
    mouseout() {
      $(this).nextAll().removeClass('active').fadeOut(100)
  },
  })
// 点击返回首页
$('.header .sy').click(function(){
    window.location.href = './index.html'
})
// 点击跳转购物车
$('.gwc').click(function(){
  window.location.href = './cart.html'
})
// 搜索框
const inpt = document.querySelector('form > .hq')
const ulBox = document.querySelector('form > ul')
inpt.oninput = function () {
    const text = inpt.value.trim()
    const script = document.createElement('script')
    script.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=31660,26350&wd=${text}&req=2&csor=1&cb=handler&_=1639190662005`
    document.body.appendChild(script)
    script.remove()
}
function handler(res) {
    if (!res.g) {
        ulBox.style.display = 'none'
        return
    }
    let str = ''
    res.g.forEach(item => {
        str += `
        <li>${item.q}</li>
      `
    })
    ulBox.innerHTML = str
    ulBox.style.display = 'block'
} 

// 详情页的逻辑代码
// 0. 获取元素
const box = document.querySelector('.box')
const paramsBox = document.querySelector('.params')

// 1. 拿到商品 id
const goodsId = window.sessionStorage.getItem('goodsId')
!goodsId ? window.location.href = './list.html' : getGoodsInfo()

// 2. 发送请求, 请求商品详细数据信息
async function getGoodsInfo() {
  // 2-1. 请求数据
  const res = await pAjax({
    url: 'http://localhost:8888/goods/item',
    data: { id: goodsId },
    dataType: 'json'
  })

  // 2-2. 判断查询的商品不存在
  // 跳转回到列表页面
  if (res.code === 2) {
    window.location.href = './list.html'
    return
  }

  // 2-3. 渲染页面
  box.innerHTML = `
    <div class="left show">
      <img src="${res.info.img_big_logo}">
      <div class="mask"></div>
    </div>
    <div class="enlarge">
      <img src="${res.info.img_big_logo}">
    </div>
    <div class="right">
      <p class="title">
        ${res.info.title}
      </p>
      <p class="price">
        <span class="current">￥${res.info.current_price}</span>
        <span class="old">￥${res.info.price}</span>
      </p>
      <p class="number">
        <button data-max="${res.info.goods_number}" data-mun="${res.info.cart_number}" data-id='${res.info.goods_id}' class='sub'>-</button>
        <input type="text" value="1">
        <button data-max="${res.info.goods_number}" data-mun="${res.info.cart_number}" data-id='${res.info.goods_id}' class='add'>+</button>
      </p>
      <p class="btns">
        <button class='cart' data-id='${res.info.goods_id}'>加入购物车</button>
        <button class='pay'>立即购买</button>
      </p>
    </div>
  `

  // 商品参数是直接给的
  // 注意: 必须在服务器上打开, 才能看到
  paramsBox.innerHTML = res.info.goods_introduce
  const n = new Enlarge('#box')
}


const id = window.localStorage.getItem('id')
const token = window.localStorage.getItem('token')
// 点击事件
box.addEventListener('click', async e => {
  //判断点击的是 加入购物车
  if (e.target.className === 'cart') {
    const goodsId = e.target.dataset.id
    console.log(goodsId);
    addCart(goodsId)
  }
  //判断点击的是 直接购买
  if (e.target.className === 'pay') {
    // 发送请求
    const res = await pAjax({
      url: 'http://localhost:8888/cart/pay',
      method: 'POST',
      data: { id },
      headers: { authorization: token },
      dataType: 'json'
    })
    alert('只接收现金')
  }
})
//加入购物车的处理函数
async function addCart(goodsId){
  // 拿到 localStroage 内的 id 和 token 
  const id = window.localStorage.getItem('id')
  const token = window.localStorage.getItem('token')
  //验证id 是否存在
  if(!id){
    //询问文本
    const res = window.confirm("您还没有登录，请登录后在购买, 点击确定跳转回登录页, 点击取消留在当前页面")
    if(res){
     // 点击确认后 跳转到登录页
     window.location.href = './login.html'
     return
    }
    //点击取消后什么也不做
    return
  }

  //发送请求
  const res = await pAjax({
   url: 'http://localhost:8888/cart/add',
   method: 'POST',
   data: { id, goodsId },
   headers: { authorization: token },
   dataType: 'json'
  })
  if( res.code === 401){
   const res = window.confirm("您登录已过期，请重新登录后在购买, 点击确定跳转回登录页, 点击取消留在当前页面")
    if(res){
     // 点击确认后 跳转到登录页
     window.location.href = './login.html'
     return
    }
    //点击取消后什么也不做
    return
  }
  console.log(res);
  if(res.code === 1){
    alert('成功加入购物车')
  }
}

class Enlarge {
  constructor (select) {
    //获取属性 
    //获取想要操作的那个盒子 ele
    this.ele = document.querySelector(select)
    //获取 自己ele 内的 .show
    this.show = this.ele.querySelector('.show')
    this.left = this.ele.querySelector('.left')
    //获取 自己ele 内的 .mask
    this.mask = this.ele.querySelector('.mask') 
    //获取 自己ele 内的 .enlarge
    this.enlarge = this.ele.querySelector('.enlarge')
    //获取 show 盒子的尺寸
    // 宽度
    this.show_width = this.show.clientWidth
    //高度
    this.show_height = this.show.clientHeight
   console.log(this.show_width);
    //获取 mask 盒子的尺寸
    //宽度
    this.mask_width = parseInt(window.getComputedStyle(this.mask).width)
    //高度
    this.mask_height = parseInt(window.getComputedStyle(this.mask).height)
    //获取enlarge 内 图片的尺寸
    // 宽度
    this.bg_width = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).width)
    //高度
    this.bg_height = parseInt(window.getComputedStyle(this.enlarge.firstElementChild).height)
    console.log(this.bg_width );
    // 调用方法  实现对应功能
    // 调整盒子大小, 让他们成比例出现
    // 修改 enlarge 盒子的大小
    this.setScale()
    //移入移出
    this.overOut()
    //跟随鼠标移动 实现放大镜效果
    this.move()
  }
//修改enlarge 盒子大大小
  setScale () {
    //计算   enlarge = mask 尺寸 * 大图片尺寸 / show 尺寸
    // enlarge 的宽度
    this.enlarge_width = this.mask_width * this.bg_width / this.show_width
    // enlarge 的宽度
    this.enlarge_height = this.mask_height * this.bg_height / this.show_height
    // 进行赋值
    this.enlarge.style.width = this.enlarge_width + 'px'
    this.enlarge.style.height = this.enlarge_height + 'px'
  }
  
//移入移出
  overOut () {
    //移入
    this.show.addEventListener('mouseover', () => {
      this.mask.style.display = 'block'
      this.enlarge.style.display = 'block'
    })
    //移出
    this.show.addEventListener('mouseout', () => {
      this.mask.style.display = 'none'
      this.enlarge.style.display = 'none'
    })
  }
 //跟随鼠标移动 实现放大镜效果
  move () {
    //给shis.show 绑定 mousemove 事件
    this.show.addEventListener('mousemove', e => {
      //拿到光标的坐标点
      let x = e.offsetX - this.mask_width / 2
      let y = e.offsetY - this.mask_height / 2
      //进行边界判定
      if (x <= 0) x = 0
      if (y <= 0) y = 0
      if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
      if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
       // 进行赋值
      this.mask.style.left = x + 'px'
      this.mask.style.top = y + 'px'
  //根据比例计算放大图片移动尺寸
  // 放大图片移动的尺寸 = x * enlarge_width / mask_width
      const bg_x = x * this.enlarge_width / this.mask_width
      const bg_y = y * this.enlarge_height / this.mask_height
  // 给放大图片进行赋值
      this.enlarge.firstElementChild.style.left = -bg_x + 'px'
      this.enlarge.firstElementChild.style.top = -bg_y + 'px'
    })
  }
}